<template>
  <div>
    <div class="header">
      <div class="left">
        <div class="img_con">
          <!-- 默认头像路径 -->
          <img :src="infoData.userFace" alt="" />
        </div>
      </div>
      <div class="right">
        <span @click="toShowAvatar">修改头像</span>
      </div>
    </div>
    <!-- 建立container布局容器 -->
    <div class="container">
      <div>
        <label class="left">登录用户:</label>
        <span class="right">{{ infoData.username }}</span>
      </div>
      <div>
        <label class="left">用户姓名:</label>
        <span class="right">{{ infoData.realname }}</span>
      </div>
      <div>
        <label class="left">用户手机:</label>
        <!-- 如果没有输入显示为暂无-->
        <span class="right">{{
          infoData.telephone === "" ? "暂无" : infoData.telephone
        }}</span>
      </div>
      <div>
        <label class="left">用户性别:</label>
        <span v-if="infoData.gender === 'male'" class="right"
          >男 <i class="el-icon-male"
        /></span>
        <span v-else class="right">女 <i class="el-icon-female" /></span>
      </div>
      <div>
        <label class="left">用户角色:</label>
        <span class="right">{{ this.rolesname }}</span>
      </div>
      <!-- fmtDate自动生成年夜日 -->
      <div>
        <label class="left">用户生日:</label>
        <span class="right">{{ infoData.birth | fmtDate }}</span>
      </div>
      <div>
        <label class="left">注册时间:</label>
        <span class="right">{{ infoData.registerTime | fmtDate }}</span>
      </div>
      <div>
        <label class="left">邮箱:</label>
        <span class="right">{{
          infoData.email === "" ? "暂无" : infoData.email
        }}</span>
      </div>
      <div>
        <label class="left">用户状态:</label>
        <el-tag
          class="right"
          :type="infoData.status === '正常' ? 'success' : 'danger'"
          size="small"
          >{{ infoData.status }}</el-tag
        >
      </div>
    </div>
    <div class="foot" @click="toShowForm">修改个人信息</div>
    <!-- 修改头像模态框 -->
    <el-dialog
      title="更改头像"
      :visible.sync="avatarVisible"
      width="50%"
      @close="avatarClose"
    >
      <div class="avatar_con">
        <span class="avatar_con">头像</span>
        <!-- 头像上传——组件 -->
        <el-upload
          class="avatar-uploader"
          :action="uploadFileURL"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
      </div>
      <el-divider />
      <!-- 修改头像模态框——底部按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="avatarVisible = false">取 消</el-button>
        <el-button type="primary" @click="avatarSave">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改个人信息对话框 -->

    <el-dialog
      title="提示"
      :visible.sync="infoVisible"
      width="50%"
      @close="toCloseInfo"
    >
      <!-- 个人信息表单 -->
      <el-form
        ref="infoFormRef"
        :model="infoForm"
        :rules="infoRules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="登录用户">
          <el-input v-model="infoForm.username" disabled />
        </el-form-item>
        <el-form-item label="姓名" prop="realname">
          <el-input v-model="infoForm.realname" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio v-model="infoForm.gender" label="male">男</el-radio>
          <el-radio v-model="infoForm.gender" label="female">女</el-radio>
        </el-form-item>
        <el-form-item label="用户手机" prop="telephone">
          <el-input v-model="infoForm.telephone" />
        </el-form-item>
        <el-form-item label="用户邮箱" prop="email">
          <el-input v-model="infoForm.email" />
        </el-form-item>
        <el-form-item label="出生日期">
          <el-form-item>
            <el-date-picker
              v-model="infoForm.birth"
              value-format="timestamp"
              type="date"
              placeholder="选择日期"
              style="width: 50%"
            />
          </el-form-item>
        </el-form-item>
      </el-form>
      <!-- 个人信息底部按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="infoVisible = false">取 消</el-button>
        <el-button type="primary" @click="toSaveInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import state from "@/store/modules/user";
import { findUserDetailsById, alterUserface, saveOrUpdate } from "@/api/user";
import { showFileURL, uploadFileURL } from "@/utils/config";
import { fmtDate } from "@/filters/index.js";
export default {
  data() {
    return {
      id: null,
      // 进入、更新页面，获取的个人信息
      infoData: [],
      uploadFileURL,
      imageUrl: "",
      avatarVisible: false,
      showFileURL,
      flagAvatar: false,
      tempImg: null,
      infoVisible: false,
      infoForm: {},
      rolesname: [],
      infoRules: {
        realname: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
        ],
      },
    };
  },
  computed: {},
  created() {
    this.id = state.state.userId;
  },
  mounted() {
    this.getData();
  },
  methods: {
    // 获取个人信息数据
    async getData() {
      const { data: res } = await findUserDetailsById({ id: this.id });
      this.infoData = res;
      this.rolesname = res.roles[0].name;
    },
    // 点击修改头像
    toShowAvatar() {
      this.tempImg = "";
      this.avatarVisible = true;
    },
    // 图片上传成功
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      // console.log(res, '==图片上传成功之后的res')
      this.tempImg = showFileURL + res.data.id;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    // 更改用户头像
    async avatarSave() {
      const res = await alterUserface({
        id: this.infoData.id,
        userface: this.tempImg,
      });
      if (res.status !== 200) return this.$message.error("头像更改失败");
      this.flagAvatar = true;
      this.avatarVisible = false;
      this.$message.success("头像更改成功");
      this.getData();
    },
    // 保存个人信息
    toSaveInfo() {
      this.$refs.infoFormRef.validate(async (valid) => {
        if (valid) {
          const res = await saveOrUpdate({ ...this.infoForm });
          // console.log(res)
          if (res.status !== 200) return this.$message.error("修改失败");
          this.infoVisible = false;
          this.$message.success("修改成功");
          this.getData();
        } else {
          return false;
        }
      });
    },
    // 个人信息模态框关闭
    toCloseInfo() {
      this.$refs.infoFormRef.resetFields();
    },
    // 关闭头像模态框
    avatarClose() {
      this.imageUrl = "";
      if (!this.flagAvatar) {
        this.$message.info("取消操作");
      }
      this.flagAvatar = false;
    },
    // 点击修改个人信息
    toShowForm() {
      this.infoForm = { ...this.infoData };
      this.infoVisible = true;
    },
  },
};
</script>
<style scoped lang="scss">
.header {
  width: 100%;
  height: 100px;
  border-bottom: 1px solid #ddd;
  display: flex;
  justify-content: center;
  align-items: center;
  .left {
    width: 400px;
    height: 82px;
    .img_con {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 80px;
        height: 80px;
      }
    }
  }
  .right {
    width: 440px;
    height: 82px;
    text-align: right;
    padding-top: 50px;
    box-sizing: border-box;
    span {
      cursor: pointer;
      color: rgb(175, 26, 26);
      font-size: 12px;
    }
  }
}
.foot {
  height: 50px;
  float: right;
  margin-right: 190px;
  font-size: 12px;
  color: rgb(175, 26, 26);
  cursor: pointer;
}
.container {
  margin-top: 30px;
  height: 440 px;
  border-bottom: 1px solid #ddd;
  div {
    margin-bottom: 32px;
    font-size: 14px;
  }
}
</style>
